/* Not necessary for appearance (it is actually somewhat undesirable to have this rule when switching between full-width and mobile with mobileNav checkbox "checked". However, for the sake of screen readers and DOM-cleanliness (tab-based navigation), it is best to use only one navigation at a time. */
@media only screen and (min-width: 768px) {
	.panelMenu {
		display: none;
	}
}
@media only screen and (max-width: 767px) {
	/* Show the panel navigation on navBreak. It is hidden prior to this to prevent screen readers from reading two navigations. */
	.panelMenu {
		display: block;
	}
	
	/* Reset the width as appropriate for mobile. */
	.panelMenu {
		width: 280px;
	}
}

.panelMenu {	
	/* Helps separate panel from body. Change/disable as desired. */
	border-right: 1px solid darkgray;
		
	/* Break main nav from DOM flow, keep it in view no matter where user is scrolled. */
	position: fixed;
		
	/* Keep panel over top of body content. This is the minimum in order to be over top of slideshow next/prev. arrows. */
	z-index: 1000;
		
	/* These properties 'left' and 'top' shouldn't be necessary to set explicitely, but included for good measure. */
	left: 0;
	top: 0;
		
	/* Keeps the nav full height, even if nav isn't tall enough to fill height inherently.  */
	/* Make the nav scrollable, even if it is taller than the height of the viewport.  */
	/* As opposed to using height:100% instead, using bottom:0 prevents "tearing" of the nav from the bottom of the browser window on Android when browser header floats up out of view. But, makes it tear at the top instead, which I find more desirable because it is the top, after all, that is changing when the header disappears (typical crappy UI and UX by Google).  */
	bottom: 0;
		
	/* In Edge, when the scrolling of the mobile nav. list has reached its limit (either at the top or the bottom), scrolling will not continue on the main body area (that is, it's not 'chained'). */
	-ms-scroll-chaining: none;
		
	/* In edge, hide the scrollbar in the mobile nav. This could also be set to "-ms-autohiding-scrollbar" but in that case, full-size scroll bars will still appear when user is uing a pointer-driven (touch pad, mouse, etc) device. */
	-ms-overflow-style: none;
		
	/* For Webkit (Android, iOS), you must set the overflow-y to 'scroll' explicitely, not to 'auto' in order to have the mobile nav. pane itself be scrollable. */
	/*  - The disadvantage here is that, on desktop, full-width scroll bars will appear all the time. */
	/*      - Not a big deal, as mobile nav will mostly be viewed on mobile devices (where scroll bars don't appear). */
	overflow-y: scroll;
		
	/* Add bouncy scrolling to the nav. pane on iOS. */
	-webkit-overflow-scrolling: touch;
		
	/* Position the panel off screen to the left using GPU-accelerated CSS properties. */
	/*  - IE9 doesn't support 3D tranform, so use 2D instead. */
	-webkit-transform: translate3d(-280px, 0, 0);
	-moz-transform: translate3d(-280px, 0, 0);
	-ms-transform: translateX(-280px);
	-o-transform: translate3d(-280px, 0, 0);
	transform: translate3d(-280px, 0, 0);
		
	/* Animate the navigation in and out. */
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
		
	/* Prevent selection of nav. panel text. */
	/*  - These rules were added to diagnose a different issue, and ended up not helping. */
	/*  - However, they seem like a good idea, so leaving them here. */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.panelMenu_checkbox {
	/* Checkboxes themselves don't need to be shown. */
	display: none;
}
.panelMenu_checkbox:checked ~ .panelMenu {
	/* Reveal the navigation panel on-screen when opened via checkbox input + label. */
	/*  - IE9 doesn't support 3D tranform, so use 2D instead. */
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translateX(0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

	-webkit-box-shadow: -4px 0 10px 0 black;
	-moz-box-shadow: -4px 0 10px 0 black;
	box-shadow: -4px 0 10px 0 black;
}

.panelMenu_checkboxLabel {
	cursor: pointer;
}
.panelMenu_checkboxLabel img, .panelMenu_checkboxLabel svg {
	vertical-align: middle;
	fill: white;
}
.panelMenu_checkboxLabelsvg {
	max-height: 50px; /*For IE11, which makes SVGs too tall.*/
}

.panelMenu_checkboxLabel.-main {
	display: inline-block;
	width: 34px;
	max-width: 5vw;
	min-width: 26px;
}
.panelMenu_checkboxLabel.-main svg {
	fill: white;
}

.panelMenu_checkboxLabel.-overlay {
	display: inline-block;
	width: 24px;
	padding-top: 5px;
	padding-bottom: 10px;
	padding-right: 20px;
	padding-left: 10px;

	/* Position fixed nav. label as a fixed element over top of content, on the right, with a little padding on top. */
	position: fixed;
	right: 0;
	top: 8px;

	/* Keep panel over top of body content. This is the minimum in order to be over top of slideshow next/prev. arrows. */
	z-index: 1000;

	/* Set fixed navicon to be off by default. */
	/*  - Visibility set to hidden so that it cannot be interacted with until visible (could also use pointer-events, but that would keep it visible for screen reader and usable via keyboard. */
	/*  - Set opacity to 0 so that it fades in and out, set via JS-controlled classes. */
	visibility: hidden;
	opacity: 0;

	/* Animate the fade-in of fixed navicon. */
	/*  - IMPORTANT: If you change the duration from 0.2s (200ms), you need to update the setTimeout duration within overlayNavVisibility.js. */
	-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s;
	-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s;
	-ms-transition: opacity 0.2s ease-in-out, visibility 0.2s;
	-o-transition: opacity 0.2s ease-in-out, visibility 0.2s;
	transition: opacity 0.2s ease-in-out, visibility 0.2s;
		
	/* Necessary width restrictions for SVG */
	/*
	width: 17%;
	max-width: 70px;
	min-width: 45px;
	*/
		
	/* Misc. styles */
	background-color: rgba(255, 255, 255, 0.95);
	border-bottom: 1px solid rgba(0, 0, 0, 0.95);
	border-left: 1px solid rgba(0, 0, 0, 0.95);
	border-top: 1px solid rgba(0, 0, 0, 0.95);
}

		
	/* SVG icon styles */
	.panelMenu_checkboxLabel.-overlay svg, .panelMenu_checkboxLabel.-overlay img {
		width: 100%;
		fill: darkgray;
	}


@media only screen and (max-width: 767px) {	
	.panelMenu_checkboxLabel.-overlay {
		/* Enable the overlay navLabel.
		    - Actual visiblity will be controlled via JS.
		    - May miraculously fix issue in IE11 on Win8 where the overlay navicon opacity would not trigger a redraw. JS was used to patch this, but with this rule in place, the patch is not necessary. Using this does make the navicon taller than desired in some browsers (FF). */
		display: inline-block;
	}
}
	
/* Prevents incidental double-triggering. */
.panelMenu svg, .panelMenu img {
	pointer-events: none;
}

/* This wrapping div serves a few purposes:
	- Additional padding within the panel is needed to ensure that iOS doesn't cut off content near the bottom of the panel.
	- iOS tries to be cool and have a semi-transparent header (bad for visibility and UX, and function as it turns out). They monkey with browser height, but exempt fixed elements, causing a miscalculation of "bottom" and "height" values.
  - iOS also places their own bottom UI bar over top of the website, which causes it to cover the bottom of the nav and not allow the nav to scroll up above it. Furthermore, because of the above bullet point, the top bar actually pushes the fixed element down, so that in order to show the last nav item, you actually need to have a px value equal or greater than both the top and the bottom bar heights combined. #ItJustWorks.
	- Even if the iOS UX/UI issues didn't exist, it is somewhat helpful to have addition padding on the bottom of the panelMenu so that links near the bottom can be scroll to the center of the area, rather than staying at the bottom (where it's harder to click on mobile). */
.panelMenu_padding {
	padding-bottom: 100px;
	box-sizing: border-box;
	min-height: 101%; /*Set via JS in panelMenu.js due to this being more of a iOS bug fix.*/
}

.panelMenu_preMenu a {
	display: block;
	font-size: 16px;
	font-weight: 800;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 5% !important;
	padding-left: calc(8px + 8%);
	border-bottom: none;
	color: black;
	text-transform: uppercase;
	line-height: 1.5em;
	padding-top: 16px;
	padding-bottom: 16px;
}

.panelMenu_postMenu {
	border-top: 1px solid darkgray;
	text-transform: uppercase;
}
.panelMenu_postMenu a {
	display: block;
	font-size: 16px;
	font-weight: 800;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 5% !important;
	padding-left: calc(8px + 8%);
	border-bottom: none;
	color: black;
}
.panelMenu_postMenu svg, .panelMenu_postMenu img {
	vertical-align: middle;
	width: 21px;
	height: 21px;
}
.panelMenu_postMenu span {
	margin-left: 18px;
}

.panelMenu_postMenu_shopLinks {
	padding-top: 16px;
}